<template>
  <div class="course-add-container">
    <!-- 课程信息部分 -->
     <div>
      <!-- sendDetail 子传父 富文本数据 -->
          <courseBase @sendDetail="getDetail"></courseBase>
     </div>
     <!-- 目录和视频部分 -->
      <div>
        <table-title title="课程内容"></table-title>
        <div class="dir-video">
          <div class="dir">
            <courseDir></courseDir>
          </div>
          <div class="video">
            <courseVideo></courseVideo>
          </div>
        </div>
      </div>
      <!-- 富文本编辑器部分 -->
       <div >
        <!-- 富文本插件 wangEditor -->
        <div>
      <div style="border: 1px solid #ccc;">
        <!-- 工具栏部分 -->
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
        <!-- 输入部分
         v-model 收集富文本的值 -->
            <Editor
                style="height: 300px; overflow-y: hidden;"
                v-model="Cdetails"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
            />
    </div>
        </div>
        <div>
          <el-button type="primary" @click="saveCourse">全部保存</el-button>
        </div>
       </div>
  </div>
</template>
<script>
import courseBase from './child/courseBase.vue'
import courseDir from './child/couseDir.vue'
import courseVideo from './child/courseVideo.vue'
import {saveCourseApi,getCourseByIdApi} from '@/api/course'
// 导入富文本插件自带的俩个组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    components:{courseBase,courseDir,courseVideo,Editor,Toolbar},
     data() {
      return {
        editor: null,
        Cdetails: '', //课程详情  从富文本数据
        toolbarConfig: {},
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'default', // or 'simple'
      }
    },
  methods:{
    getDetail(Cdetails){ //接收子组件传来的富文本数据
        this.Cdetails=Cdetails;
    },
   async  saveCourse(){ //全部保存接口
      // 获取课程基本信息
        let courseRes=await getCourseByIdApi(this.$route.query.ID)
        console.log(courseRes,"--课程信息-")
        let res=await saveCourseApi({
          Cname:courseRes.data.courselist.Cname,
          Cdescribe:courseRes.data.courselist.Cdescribe,
          Cprice:courseRes.data.courselist.Cprice,
          CategoryOne:courseRes.data.courselist.CategoryOne,
          CategoryTwo:courseRes.data.courselist.CategoryTwo,
          CategoryThree:courseRes.data.courselist.CategoryThree,
          Cpic: courseRes.data.courselist.Cpic,
          // 比基本保存多传的数据
           _id:courseRes.data.courselist._id,
          Cdetails:this.Cdetails //
        })
        console.log(res,"--全部保存接口")
        // 跳转到课程列表
        this.$router.push({name:"courselist"})
    },
    onCreated(editor) {
      // Object.seal 防止修改editorConfig 密封对象方法 可以阻止对象
        this.editor = Object.seal(editor) //否则会报错
      },
  },
   beforeDestroy() { //组件销毁前
      const editor = this.editor
      if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
}
</script>
<style lang="scss" >
  @import url('@wangeditor/editor/dist/css/style.css');
  .course-add-container{
    width: 900px;
    margin: 20px;
  }
  .dir-video{
    display: flex;
    margin-top: 20px;
    .dir{
      width:48%;
      margin-right: 4%;

      height: 400px;

    }
    .video{
      width:48%;
 
           height: 400px;
    }
  }
</style>